// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'sass:math';

$image-path: '/media/protocol/img';

@use '../utils' as f3;
@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';

.c-hero {
    background: f3.$violet-dark center top / cover no-repeat url('/media/img/firefox/family/grid-hero.svg');

    @media (prefers-reduced-motion: no-preference) and (#{$mq-sm}) {
        background-attachment: fixed;
    }

    svg {
        max-width: 100%;
        height: auto;
    }

    // Override Protocol wordmark
    .mzp-c-wordmark.mzp-t-product-firefox.mzp-t-wordmark-lg {
        background-image: url('/media/img/firefox/family/logo-word-hor-white.svg');
    }

    .c-card.t-shadow {
        @include f3.card-shadow(f3.$pink-light);
        @include text-title-2xs;
        padding: $spacing-lg;

        p {
            line-height: 1.6; // protocol override
        }
    }

    .c-blurb {
        @include text-body-lg;

        --shadow-offset: #{$border-radius-md};
        @include f3.card-shadow;
        background-color: f3.$blue-light;
        border-radius: $border-radius-lg;
        color: inherit;
        display: inline-block;
        font-weight: bold;
        margin-top: $layout-lg;
        text-align: center;
        text-decoration: none;

        @media (prefers-reduced-motion: no-preference) {
            transition: transform 0.2s;

            &:hover,
            &:focus {
                transform: scale(1.05);
            }

            @media #{$mq-sm} {
                &:hover,
                &:focus {
                    transform: scale(1.2);
                }
            }
        }

        @media (prefers-reduced-motion: reduce) {
            &:hover,
            &:focus {
                text-decoration: underline;
                text-decoration-thickness: 2px;
            }
        }

        @media #{$mq-md} {
            display: flex; // allow logo to share same line as text
            gap: $spacing-sm;
        }
    }

    .c-blurb-logo {
        @include background-size(222px, 26px);
        @include image-replaced;
        background-image: url('/media/img/firefox/family/logo-common-sense-media.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        max-width: 222px;
        min-width: 18ch;
        display: block;
    }
}

@supports (display: grid) {
    .c-hero {
        .l-grid {
            display: grid;
            grid-template-columns: 1fr;
            place-items: center;
        }
        @media #{$mq-md} {
            h1 {
                margin-bottom: 0;
            }

            .c-card.t-shadow {
                padding: $spacing-2xl;
            }

            .c-blurb-container {
                grid-column: 1 / -1;
                justify-self: center;
                width: fit-content;
            }
        }

        @media #{$mq-lg} {
            .l-grid {
                column-gap: $layout-lg;
                grid-template-columns: minmax(500px, 50%) 1fr;
            }
        }
    }
}

.js {
    @media (prefers-reduced-motion: no-preference) {
        .c-hero {
            h1 {
                opacity: 0;
            }

            .lockup-white-box {
                opacity: 0;

                &.animate-pop-in {
                    animation-delay: f3.$animation-duration;
                }
            }

            .c-blurb-container {
                opacity: 0;
            }
        }
    }
}
